<template>
    <view class="userLabel">
        <view class="userLabel-L">
            <up-image
                src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b"
                :width="width || '120rpx'" height="118rpx" :radius="radius"></up-image>
            <view class="info">
                <text class="username">
                    {{ item.name }}
                </text>
                <text class="address" v-if="item.address">
                    {{ item.address }}
                </text>
                <text class="num" v-if="item.address">
                    {{ item.num }}
                </text>
                <text class="signature" v-else>
                    {{ item.signature || item.num }}
                </text>
            </view>
        </view>
        <view class="followBtn" :class="item.handle == '回关' ? 'handle1' : item.handle == '互粉' ? 'handle2' : textDecoration? 'textDecoration' : ''"
            @click="clickUnfollow">
            {{ item.handle || '取消关注' }}
        </view>
    </view>
</template>

<script lang="ts" setup>
defineProps(['item', 'width', 'radius', 'textDecoration'])
const emit = defineEmits(["clickUnfollow"])
const clickUnfollow = () => {
    console.log(' :>> ');
    emit("clickUnfollow")
}
</script>

<style lang="scss" scoped>
.userLabel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    .userLabel-L {
        display: flex;
        flex-direction: row;

        .info {
            display: flex;
            flex-direction: column;
            margin-left: 30rpx;

            .username {
                font-size: 37rpx;
                font-weight: bold;
                margin-top: 10rpx;
                margin-bottom: 6rpx;
            }

            .signature {
                font-size: 32rpx;
                margin-top: 5rpx;
                color: #B5B5B5;
            }

            .address {
                font-size: 24rpx;
                color: #1F2225;
            }

            .num {
                margin-top: 3rpx;
                font-size: 20rpx;
                color: #9472FF;
            }
        }
    }

    .followBtn {
        font-size: 34rpx;
        color: #9472FF;
        border: .5rpx solid #9472FF;
        border-radius: 40rpx;
        padding: 10rpx 18rpx;
        margin-right: 20rpx;
        text-decoration: underline;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .handle1 {
        min-width: 116rpx;
        min-height: 54rpx;
        color: #fff;
        background: #9472FF;
        border: none;
    }

    .handle2 {
        min-width: 116rpx;
        min-height: 54rpx;
        color: #CCCCCC;
        border: 1rpx solid #CCCCCC;
    }

    .textDecoration{
        text-decoration: none;
    }
}   
</style>